<template>
  <div>
    <el-card shadow="never" class="margin-30">
      <div slot="header">
        <span>条件查询</span>
      </div>
      <el-form ref="form" :model="searchOrder" label-width="80px" size="mini">
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-form-item label="订单编号">
              <el-input v-model="searchOrder.orderSn" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="订单类型">
              <!-- orderType (integer, optional): 订单类型：0->正常订单；1->秒杀订单 , -->
              <el-select v-model="searchOrder.orderType" placeholder="订单类型" clearable filterable>
                <el-option
                  label="正常订单"
                  :value="0"
                />
                <el-option
                  label="秒杀订单"
                  :value="1"
                />
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="支付方式">
              <!-- payType (integer, optional): 支付方式：0->未支付；1->支付宝；2->微信 , -->
              <el-select v-model="searchOrder.payType" placeholder="支付方式" clearable filterable>
                <el-option
                  label="未支付"
                  :value="0"
                />
                <el-option
                  label="支付宝"
                  :value="1"
                />
                <el-option
                  label="微信"
                  :value="1"
                />
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="订单状态">

              <el-select v-model="searchOrder.status" placeholder="订单状态" clearable filterable>
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value"
                />
              </el-select>

            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="4" :offset="20">
            <el-form-item>
              <el-button type="primary" @click="doSearchOrder">搜索</el-button>
              <el-button @click="doRest">重置</el-button>
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>

    </el-card>

    <el-card shadow="never" class="margin-30">

      <el-table :data="orderList" border stripe>
        <el-table-column
          type="index"
          label="#"
          align="center"
          width="50"
        />
        <el-table-column
          prop="orderSn"
          label="订单编号"
          align="center"
        />
        <el-table-column
          label="支付方式"
          align="center"
        >
          <template slot-scope="scope">
            <!-- payType (integer, optional): 支付方式：0->未支付；1->支付宝；2->微信 , -->
            <el-button v-if="scope.row.payType === 0" type="default" size="mini">未支付</el-button>
            <el-button v-if="scope.row.payType === 1" type="default" size="mini">
              <svg-icon icon-class="zhifubao" class-name="custom-class" />
            </el-button>
            <el-button v-if="scope.row.payType === 2" type="default" size="mini">微信</el-button>

          </template>
        </el-table-column>
        <el-table-column
          label="订单状态"
          align="center"
        >
          <template slot-scope="scope">
            <!-- status (integer, optional): 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->退货；5->无效订单 -->
            <el-tag v-if="scope.row.status===0" type="danger" size="mini" effect="dark">待付款</el-tag>
            <el-tag v-if="scope.row.status===1" type="warning" size="mini" effect="dark">待发货</el-tag>
            <el-tag v-if="scope.row.status===2" size="mini" effect="plain">已发货</el-tag>
            <el-tag v-if="scope.row.status===3" size="mini" effect="dark">已完成</el-tag>
            <el-tag v-if="scope.row.status===4" type="info" size="mini" effect="dark">退货</el-tag>
            <el-tag v-if="scope.row.status===5" type="info" size="mini" effect="dark">无效订单</el-tag>

          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="添加时间"
          align="center"
        />
        <el-table-column
          prop="memberUsername"
          label="用户账号"
          align="center"
        />
        <el-table-column
          label="订单类型"
          align="center"
        >
          <template>
            <!--  orderType (integer, optional): 订单类型：0->正常订单；1->秒杀订单 , -->
            <!-- <el-tag v-if="scope.row.orderType===0" type="danger" size="mini" effect="dark">正常订单</el-tag>
            <el-tag v-if="scope.row.orderType===1" type="warning" size="mini" effect="dark">秒杀订单</el-tag> -->
            <el-tag type="success" size="mini" effect="dark">正常订单</el-tag>

          </template>
        </el-table-column>
        <el-table-column
          prop="note"
          label="备注"
          align="center"
          width="300"
        />
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-view" @click="goOrderDetail(scope.row.id)">查看订单</el-button>

          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        :current-page.sync="paginationObj.start"
        :page-sizes="paginationObj.pageSizes"
        :page-size="paginationObj.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginationObj.total"
        @size-change="sizeChange"
        @current-change="currentChange"
      >
        >
      </el-pagination>

    </el-card>

  </div>
</template>
<script>
import { findOrdersByPage as findOrdersByPageApi } from '@/api/order/order'
import mixs from '@/mixins'
import { filterNullParams } from '@/utils'
export default {
  name: 'OrderList',
  mixins: [mixs],
  data() {
    return {
      searchOrder: {},
      // status (integer, optional): 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->退货；5->无效订单
      statusList: [
        {
          value: 0,
          text: '待付款'
        },
        {
          value: 1,
          text: '待发货'
        },
        {
          value: 2,
          text: '已发货'
        },
        {
          value: 3,
          text: '已完成'
        },
        {
          value: 4,
          text: '退货'
        },
        {
          value: 5,
          text: '无效订单'
        }

      ],
      orderList: []
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.getOrderList()
  },
  mounted() {
  },
  methods: {
    // 跳转订单详情
    goOrderDetail(id) {
      this.$router.push({ name: 'OrderDetail', params: { id }})
    },
    // 搜索订单
    doSearchOrder() {
      this.getOrderList()
    },
    doRest() {
      this.searchOrder = {}
      this.getOrderList()
    },
    async getOrderList() {
      const searchForm = filterNullParams(this.searchOrder)
      const res = await findOrdersByPageApi(this.paginationObj.start, this.paginationObj.limit, searchForm)
      this.orderList = res.data.rows
      this.paginationObj.total = res.data.total
    },
    sizeChange(val) {
      this.paginationObj.start = 1
      this.paginationObj.limit = val
      this.getOrderList()
    },
    currentChange(val) {
      this.paginationObj.start = val
      this.getOrderList()
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
